<template>
  <div>
    <el-dialog :title="`${jobName}-执行日志`" :visible="true" @close="$emit('close')" width="70%">
      <el-row :gutter="20">
        <el-form :inline="true">
          <el-form-item>
            <el-select v-model="searchObj.status" placeholder="执行状态" clearable @change="getAll()">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="searchObj.execTimes"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="执行开始时间"
              end-placeholder="执行结束时间"
            />
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getAll()">查询</el-button>
          <el-button icon="el-icon-refresh" @click="reset()">清空</el-button>
        </el-form>
      </el-row>
      <el-row :gutter="20">
        <el-button v-if="hasPerm('monitor:job-log:batch-delete')" type="danger" icon="el-icon-delete" :disabled="ids.length < 1" @click="batchDelete">
          批量删除
        </el-button>
        <el-button v-if="hasPerm('monitor:job-log:export')" type="primary" icon="el-icon-download" @click="exportData">批量导出</el-button>
      </el-row>
      <el-row :gutter="20">
        <el-table
          v-loading="loading"
          element-loading-text="正在努力加载数据中..."
          :data="page.records"
          :border="true"
          stripe
          style="width: 100%; margin: 15px 0px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" fixed="left" width="55" />
          <el-table-column type="index" fixed="left" width="80" label="序号" />
          <el-table-column prop="jobName" label="任务名称" show-overflow-tooltip />
          <el-table-column prop="jobGroup" label="任务组" show-overflow-tooltip />
          <el-table-column prop="jobMessage" label="日志信息" show-overflow-tooltip />
          <el-table-column prop="execTime" label="执行时间" show-overflow-tooltip />
          <el-table-column prop="status" label="执行状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" type="danger">失败</el-tag>
              <el-tag v-if="scope.row.status === 0" type="success">成功</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="20">
        <el-pagination
          :background="true"
          :current-page="pIndex"
          :page-size="pSize"
          :total="page.total"
          :page-sizes="[1, 3, 6, 9, 12, 15, 18]"
          layout="total, sizes, ->, prev, pager, next, jumper"
          @current-change="getAll"
          @size-change="handleSizeChange"
        />
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('close')">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import jobLogApi from '@/api/sys/job-log'

export default {
  // 接收父组件传值
  props: {
    jobName: { type: String, required: true }
  },
  data() {
    return {
      statusOptions: [
        { value: 1, label: '失败' },
        { value: 0, label: '成功' }
      ],
      loading: false, // 加载状态
      pIndex: 1, // 当前页
      pSize: 6, // 每页显示记录数
      searchObj: {}, // 条件封装对象
      page: [], // 列表
      ids: []
    }
  },
  created() {
    this.searchObj.jobName = this.jobName
    this.getAll()
    this.$watch('jobName', (newValue, oldValue) => {
      if (newValue !== oldValue) {
        this.searchObj.jobName = newValue
        this.getAll()
      }
    })
  },
  methods: {
    // 加载数据列表
    getAll(current = 1) {
      this.loading = true
      this.pIndex = current
      jobLogApi
        .getPage(this.pIndex, this.pSize, this.searchObj)
        .then((res) => {
          this.page = res.data
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 复选框选中
    handleSelectionChange(r) {
      // 得到选中的id
      this.ids = r.map((v) => v.id)
    },

    // 改变页码
    handleSizeChange(pageSize) {
      this.pSize = pageSize
      // 重新调用数据加载方法 --> 方法中已经加入的查询参数
      this.getAll()
    },

    // 重置
    reset() {
      this.searchObj = {}
      this.getAll()
    },

    // 批量删除
    batchDelete() {
      if (this.ids.length > 0) {
        this.$confirm('此操作将永久删除执行日志信息,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          // 确定执行then方法
          .then(() => {
            jobLogApi.batchDelete(this.ids).then((resp) => {
              this.$message.success('删除成功!')
              this.getAll()
            })
          })
      } else {
        this.$message.warning('至少选择一条数据!')
      }
    },

    // 导出
    exportData() {
      this.$message.success('功能开发中')
    }
  }
}
</script>
